<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>入场须知</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../formal/css/quill.css" />
		<style>
			.signform{
        padding: 20px 0;
      }
      .signform .btn{
        padding: 15px 0;
        width: 100%;
        display: inline-block;
        text-align: center;
        border-radius: 6px;
      }
      .signform img{
        width: 6.25rem;
		/*
        transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
		*/
      }
      .signform .border-bottom{
        border-bottom: 1px solid #dcdcdc;
      }	
	  .padding{
		  padding:0.6rem 8%
	  }
	  body{background:#fff;}
	  ul,li{list-style: none;width:100%;padding:0;}
	  li{font-size:14px;color:#8f8f94;padding:0;}
	  p{display: block;}
	  .mui-bar{z-index: 9;}
		</style>
	</head>

	<body>
		<!--
		<header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">入场须知</h1>
		</header>
		-->
	
	<div style="width:100%;height:6px;box-shadow: 0 1px 6px #ccc;margin-top:-6px;"></div>
	<div class="mui-content bg-white padding-bottom" id="page">
		<div style="width: 86%;margin:0 7%;text-align:center;height:50px;line-height: 40px;
		border-bottom:1px dashed #ABAAAA">外来人员入场登记须知</div>
      <div id="video_auto" style="padding:0 5%;width:90%; height: 200px; 
	  margin:5vh auto;z-index:-1;"></div>
	  <div class="padding">  
		<div v-html="html">
			
		</div>  
        
		<div class="signform flex">
		  <div>签名：</div>
		  <div class="flex-sub border-bottom text-center sign">
		    <img src="" class="qianmingimg" >
		  </div>
		</div>
	
		<div class="signform flex">
		  <span class="bg-blue text-white btn" @click="submit">保存</span>
		</div>
		
	  </div>
	  
		<div id="video" style="width:100%; height: 200px; margin:auto; position: absolute;top:0;"></div>
	  
	</div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../../../js/vue.js"></script>

    <script>
	  var pwarp = new Vue({
	  		el: '#page',
	  		data:{
				html:'',
				form:undefined,
				youQm:false,
				imgsrc:''
			},
			methods:{
				submit(){
					if(!this.youQm){
						mui.toast('请先进行签名！');
						return false;
					}
					var form = this.form;
					form.pactId = form.data.pactId;
					form.signature = this.imgsrc.replace(/^data:image\/\w+;base64,/, "");
					//form.pactContent = form.data.content.replace('（签名图片）','<img width="100" height="auto" src="'+this.imgsrc+'" />');
					var Ctxt = form.data.content
					Ctxt = Ctxt.replace(/</ig,'&lt;');
					form.pactContent = Ctxt.replace(/>/ig,'&gt;');
					delete this.form.data;
					localStorage.removeItem('fromNotice');
					localStorage.setItem('fromNotice',JSON.stringify(form));
					//$('body').append(form.pactContent)
					this.new_back()
				},
				timer(){
				  var date = new Date()
				  var year = date.getFullYear()
					
				  /* 在日期格式中，月份是从0开始的，因此要加0
				   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				   * */
				  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				  // 拼接
				  return year + '年' + month + '月' + day + '日';
				},
				pload(ff){
					this.form = ff;
					ff.data.content = ff.data.content.replace('{#areaName#}',ff.data.areaName)
					ff.data.content = ff.data.content.replace('{#stationName#}',ff.data.stationName)
					ff.data.content = ff.data.content.replace('{#phone#}',ff.phone)
					ff.data.content = ff.data.content.replace('{#company#}',ff.hasUnit==0?'无工作单位':(ff.enterpriseName||''))
					ff.data.content = ff.data.content.replace('{#date#}',this.timer())
					ff.data.content = ff.data.content.replace('{#signature#}','<span style="color:#fff">{#signature#}</span>')
					ff.data.content = ff.data.content.replace('{#username#}','')
					ff.data.content = ff.data.content.replace('{#content#}',ff.content||'')
					this.html = ff.data.content;
					var videoStyle = {
						'src':ff.data.externalVideo,
						'autoplay':true,'top':'70px',width:'100%',height:'100%','show-fullscreen-btn':false,
						'show-progress':true,'show-play-btn':false,'enable-progress-gesture':false,
						'controls':false
						};
					//加入视频
					var video = new plus.video.VideoPlayer('video_auto', videoStyle),
					video2 = plus.video.createVideoPlayer('video',videoStyle);
					
					video.addEventListener('fullscreenchange',function(event){
						if(!event.detail.fullScreen){
							video.play();
							video.requestFullScreen(-90);
						}
					});
					
					setTimeout(function(){
						video.play();
						video.requestFullScreen(-90);//视频全屏播放，如果启用，
						video.hide();
					},2000);
					
					video.addEventListener('ended',function(){
						  //视频播放完毕关闭视频
						  video.exitFullScreen();
						  video.close();
						  //videoBox.close();
						  new plus.video.VideoPlayer('video_auto', {src:videoStyle.src});
						  $('#video').remove();
						  vioEnded();
					});
					video.addEventListener('error',function(){
						//视频加载错误
						video.exitFullScreen();
						video.close();
						new plus.video.VideoPlayer('video_auto', {src:videoStyle.src});
						$('#video').remove();
						mui.toast('视频加载错误，请检查视频源！');
						
						mui.back=pwarp.new_back;
					});
					video.addEventListener('fullscreenchange',function(e){
						if(!e.detail.fullScreen){
							//用户退出全屏
						}
					})
					var vioEnded = function(){
						//视频播放完调用
						//前往签名页
						$('.sign').unbind().bind('click',function(){
						  mui.openWindow({
							url: '../sign/index.html',
							id: '../sign/index.html',
						  });
						});
					}
					
					//前往签名页
					$('.sign').bind('click',function(){
					  mui.toast('视频未播放完，请完整观看视频后再签字提交！');
					});
				/* pload end */
				}
			}
	  });
      mui.init()
      var page = null;  
	  window.addEventListener('signUrl',function(){
		  pwarp.$data.youQm = true;
		  pwarp.$data.imgsrc=localStorage.getItem('dataURL');
		  $('.qianmingimg').attr('src',localStorage.getItem('dataURL'));
		  localStorage.removeItem('dataURL')
	  });
	  window.addEventListener('fromPageBackEvent',function(){
		  mui.toast('请先签写入场须知后并提交保存！');
		  return;
	  });
      mui.plusReady(function(){
		  
		  var cv = plus.webview.currentWebview(),
		  form=cv.form?cv.form:{};
		  if(form.data){
			  pwarp.pload(form);
		  }
		  
		  //plus.nativeUI.showWaiting("加载中...");
		 
		  var first = null;
		  pwarp.new_back = mui.back;
		  mui.back = function(){
			//首次按键，提示‘再按一次退出应用’
			  if (!first) {
				first = new Date().getTime();
				mui.toast('请签写协议并保存。');
				setTimeout(function() {
				  first = null;
				}, 800);
			  } else {
				if (new Date().getTime() - first < 1000) {
				  plus.runtime.quit();
				}
			  }
		  }
	  })
	  
    </script>
</body>
</html>